<template>
  <div class="crud-table">

    <!-- 搜索框 -->
    <csearchbox :option="option.isSearch?searchs:searchOptions"
                @getQuery="getQuery"
                @searchPage="searchPage"/>
                <!--可选参数 
                :textArray="textArray"
                :selectArray="selectArray"
                :timeArray="timeArray" -->

    <!-- 展示搜索值,仅供调试使用 -->
    <!-- <div v-for="(value,key,index) in query" :key="index">
      <span style="display:inline-block;width:300px">搜索框中的键名为：{{key}}</span>
      <span style="margin-left:20px">搜索框中的键值为{{value}}</span>
    </div> -->
    <slot name="ctabletitle"></slot>
    <!-- 按钮组 -->
    <div v-if="option.addBtn||option.deleteSelectBtn||option.excelBtn||option.printBtn" 
         style="height:40px;line-height:40px;padding-left:20px">
      <el-button v-if="option.addBtn" type="primary" size="mini" @click="handleAdd">新 增</el-button>
      <el-button v-if="option.deleteSelectBtn" type="primary" size="mini" plain @click="handleSomeDelete">批量删除</el-button>
      <el-button v-if="option.excelBtn" type="primary" size="mini" @click="handleExport">导出Excel</el-button>
      <el-button v-if="option.printBtn" type="primary" size="mini" @click="handlePrint">打 印</el-button>
    </div>

    <!-- 表格 -->
    <ctable :data="data" 
            :option="option"
            @handleView="handleView"
            @handleEdit="handleEdit"
            @handleDelete="handleDelete"
            @getSelection="getSelection"
            @getCurrentRow="getCurrentRow" />

    <slot name="ctablebottom"></slot>
    <!-- 分页 -->
    <cpagination v-if="option.isPage"
                 :page="page"
                 @handleCurrentChange="handleCurrentChange"
                 @handleSizeChange="handleSizeChange">
      <slot name="cpagination"></slot>
    </cpagination>
  </div>
</template>

<script>
import csearchbox from '@/components/csearchbox'
import ctable from '@/components/ctable'
import cpagination from '@/components/cpagination'
import download from "@/api/download"

//临时
import * as Type from '@/api/service'

export default {
  components:{
    csearchbox,//搜索框
    ctable,//表格
    cpagination,//分页
  },
  created(){
    console.log('option')
    console.log(this.option)
  },
  props:{
    //crud配置项
    option:{
      type:Object,
      default:function(){
        return null
      }
    },
    //table中展示的data
    data:{
      type:Array,
      default:function(){
        return[]
      },
    },
    //分页对象
    page:{
      type:Object,
      default:function(){
        return null
      }
    },
    //搜索配置项
    searchOptions:{
      type:Object,
      default:function(){
        return {
          clearBtn:false,
          items:[]
        }
      }
    },
  },
  data(){
    return {
      //查询条件集合
      query:{},

      
      //根据表格配置选项筛选出的搜索项
      searchs:{
        items:[],
      },

      //复选框选中项的集合,之后改为父传子,目前暂无需求
      selection:[],

      //搜索配置项，优先级大于textArray,selectArray,timeArray
      // searchOptions:{
      //   clearBtn:true,
      //   items:[
      //     {
      //       type:'text',
      //       key:'showText',
      //       label:'option展示用文本'
      //     },
      //     {
      //       type:'select',
      //       key:'isBind',
      //       label:'option聚合码状态',
      //       dicData:[
      //         {
      //           desc:'已绑定',
      //           val:'1'
      //         },
      //         {
      //           desc:'未绑定',
      //           val:'0'
      //         }
      //       ]
      //     },
      //     {
      //       type:'select',
      //       key:'sex',
      //       label:'性别',
      //       enumKey:'sex',
      //     },
      //     {
      //       type:'times',
      //       key:['queryStartTime','queryEndTime'],
      //       label:'option起止时间'
      //     },
      //     {
      //       type:'time',
      //       key:['queryTime'],
      //       label:'option单个时间'
      //     },
      //   ]
      // },
      // textArray:[
      //   {
      //     key:'showText',
      //     label:'展示用文本'
      //   },
      // ],
      // selectArray:[
      //   {
      //     key:'isBind',
      //     label:'聚合码状态',
      //     dicData:[
      //       {
      //         desc:'已绑定',
      //         val:'1'
      //       },
      //       {
      //         desc:'未绑定',
      //         val:'0'
      //       }
      //     ]
      //   },
      // ],
      // timeArray:[
      //   {
      //     type:'times',
      //     key:['queryStartTime','queryEndTime'],
      //     label:'起止时间'
      //   },
      //   {
      //     type:'time',
      //     key:['queryTime'],
      //     label:'单个时间'
      //   },
      // ],
    }
  },
  created(){
    this.getSearch()
    if(!this.option.isDefaultQuery){
      this.onLoad()
    }
  },
  methods:{
    //从option中获取搜索条件,目前支持text,time,times,select四种
    getSearch(){
      let items=this.option.items
      this.searchs.clearBtn=this.option.clearBtn
      this.searchs.items=[]
      let _this=this
      items.map(function(current,index){
        if(current.isSearch){
          let tmpObj={...current}
          if(current.type==='time'){
            tmpObj.key=[current.key]
            _this.searchs.items.push(tmpObj)
          }
          else if(current.type==='times'){
            if(index%2===0){//只对一个做处理
              let timeVal=''
              if(current.key.search('Start')!=-1){
                timeVal=current.key.replace('Start','End')
                tmpObj.key=[current.key,timeVal]
              }else{
                timeVal=current.key.replace('End','Start')
                tmpObj.key=[timeVal,current.key]
              }
              tmpObj.label='查询起止时间'
              _this.searchs.items.push(tmpObj)
            }
          }
          else if(current.type==='text'){
            _this.searchs.items.push(tmpObj)
          }
          else if(current.type==='select'){
            _this.searchs.items.push(tmpObj)
          }
        }
      })
    },

    //获取query
    getQuery(query){
      this.query={...query}
      this.$emit("getQuery",query)
    },
    //搜索按钮及清空均会调用该事件,已完成
    searchPage(){
      this.onLoad();
    },
    //加载事件,已完成
    onLoad() {
      console.log(2)
      this.$emit('onLoad',{page:this.page,query:this.query,})
    },
    
    
    //按钮组事件,配合表格组件使用,部分完成
    //选中数据均存在selection中
    //新增事件
    handleAdd(){
      console.log('新增')
    },
    //批量删除事件
    handleSomeDelete(){
      console.log('批量删除')
    },
    //Excel导出事件,已完成
    handleExport(){
      download.exportExcel(this.option.excelUrl,this.query,this.option.excelName+download.getDateTime()+".xlsx");
    },
    //打印事件
    handlePrint(){
      console.log('print')
    },


    // 表格组件事件.列架子,未完成
    //查看事件
    handleView({index, row}) {
      this.$emit('handleView',{index, row})
    },
    //编辑事件
    handleEdit({index, row}) {
      console.log('编辑')
      console.log(index, row);
    },
    //删除事件
    handleDelete({index, row}) {
      console.log('删除')
      console.log(index, row);
    },
    //获取当前勾选行
    getCurrentRow({row}){
      console.log(row)
    },
    //获取selection
    getSelection({selection}){
      this.selection=selection
    },


    // 分页组件事件开始.已封装完成
    //每页展示数量改变触发
    handleSizeChange({pageSize}) {
      this.$emit('handleSizeChange',{pageSize})
      this.onLoad()//分页改变,重新获取数据
    },
    //当前页改变事件
    handleCurrentChange({currentPage}) {
      this.$emit('handleCurrentChange',{currentPage})
      this.onLoad()//分页改变,重新获取数据
    },
  },
}
</script>

<style lang='scss'>
  .crud-table{
    background: #fff;
    height: 100%;
    margin: 10px 20px 30px;
    padding: 20px;
    border-radius: 10px;
  }
</style>